<template>
    <div class="container">
        <div>通过getters获取：{{ state.getUserName }}</div>
        <div>通过state获取：{{ state.count }}</div>
        <!-- <div>通过state对象直接获取：{{ state.user.userInfo.name }}</div>
        <div>通过userStated的getters获取：{{ userState.getUserName }}</div>
        <div>通过userState的state对象直接获取：{{ userState.name }}</div> -->
        <!-- <p></p>
        <test-pinia /> -->
        <!-- <color-text /> -->
    </div>
</template>
<script setup>
import TestPinia from './components/test-pinia.vue'
import ColorText from './components/color-text.vue'

// 引入定义好的实例
import { maninState } from "@/store/index.js"
import { userInfo } from "@/store/user/index.js"
// 执行实例方法获取到具体的状态对象
const state = maninState();
// 调用设置用户的方法进行修改用户名
state.setUserName("aa")
// 再次获取就发生了变化
state.setRuleList("bb");
const userState = userInfo();
userState.setUserName("ll")
</script>
<style scoped>
.container {
    padding: 10px;
}
</style>